<template>
  <div class="day7">
    <div class="btn"
      @click="btnClick">
      快来点俺~
      <!-- circle进入点击位置出现 消失 -->
      <div class="circle"
        v-show="isShow"
        :style="`left:${x}px;top:${y}px;`">
      </div>
    </div>
    <div class="tips">
      <div>animation动画触发条件</div>
      <div>1、dom从无到有时</div>
      <div class="my-tip">2、display:none 切换为 block</div>
      <div>3、通过类名 动态添加/移除animation</div>
      <div class="my-tip">overflow:hidden阻止不了fixed定位的子元素的溢出</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const isShow = ref(false)
const x = ref(0),
  y = ref(0)
function btnClick(e) {
  x.value = e.clientX - e.target.offsetLeft
  y.value = e.clientY - e.target.offsetTop
  isShow.value = true
  setTimeout(() => {
    isShow.value = false
  }, 500)
  // 原版的是 circle为absolute定位，要计算btn在页面相对位置，点击的地方与页面的相对位置，两者相减得出点击处 与btn的相对位置，进而给circle赋值

  //我的理解是，既然btn已经overflow：hidden了，且只有在btn范围内点击才会触发circle的出现，那么 circle为fixed定位，且展示位置就是鼠标点击处 即满足需求 (实测有个问题，父盒子拘不住它，溢出了)
  // x.value = e.clientX
  // y.value = e.clientY
}
</script>

<style lang="scss" scoped>
.day7 {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .btn {
    cursor: pointer;
    border-radius: 8px;
    padding: 20px 30px;
    overflow: hidden;
    line-height: 16px;
    background-color: #1663ab;
    color: #fff;
    position: relative;

    .circle {
      // position: fixed;
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: #fff;
      border-radius: 50%;
      transform: translate(-50%, -50%) scale(0);
      animation: scale 0.5s ease-out;
    }

    @keyframes scale {
      to {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
      }
    }
  }
}
</style>